<template>
  <view class="mood-card" @tap="onCardClick">
    <view class="mood-header">
      <text class="mood-date">{{ formatDate(moodData.recordDate) }}</text>
      <text 
        class="mood-level"
        :class="{
          'mood-level-1': moodData.moodLevel === 1,
          'mood-level-2': moodData.moodLevel === 2,
          'mood-level-3': moodData.moodLevel === 3,
          'mood-level-4': moodData.moodLevel === 4,
          'mood-level-5': moodData.moodLevel === 5
        }"
      >
        {{ getMoodLevelLabel(moodData.moodLevel) }}
      </text>
    </view>
    <view class="mood-description">
      {{ moodData.moodDescription }}
    </view>
    <view class="mood-tags" v-if="moodData.moodTags">
      <text 
        v-for="tag in parseTags(moodData.moodTags)" 
        :key="tag" 
        class="tag-item"
      >
        {{ tag }}
      </text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'MoodCard',
  props: {
    moodData: {
      type: Object,
      required: true
    }
  },
  methods: {
    onCardClick() {
      this.$emit('click', this.moodData.id);
    },
    formatDate(dateString) {
      const date = new Date(dateString);
      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
    },
    getMoodLevelLabel(level) {
      const labels = ['', '非常糟糕', '糟糕', '一般', '好', '非常好'];
      return labels[level];
    },
    parseTags(tags) {
      return typeof tags === 'string' ? tags.split(',') : tags;
    }
  }
}
</script>

<style scoped>
.mood-card {
  background-color: white;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.mood-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.mood-date {
  font-size: 28rpx;
  color: #666;
}

.mood-level {
  font-size: 28rpx;
  padding: 5rpx 10rpx;
  border-radius: 10rpx;
}

.mood-level-1 { background-color: #ff4d4f; color: white; }
.mood-level-2 { background-color: #ff7a45; color: white; }
.mood-level-3 { background-color: #ffa940; color: white; }
.mood-level-4 { background-color: #52c41a; color: white; }
.mood-level-5 { background-color: #13c2c2; color: white; }

.mood-description {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.mood-tags {
  display: flex;
  flex-wrap: wrap;
}

.tag-item {
  background-color: #f0f0f0;
  color: #666;
  font-size: 24rpx;
  padding: 5rpx 10rpx;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
  border-radius: 20rpx;
}
</style> 